<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css"
			href="../easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css"
			href="../easyui/themes/icon.css">
		<link href="../css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../easyui/jquery.min.js"></script>
		<script type="text/javascript"
			src="../easyui/locale/easyui-lang-zh_CN.js"></script>
		<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript">
	$(function() {
		var pager = $('#dg').datagrid().datagrid('getPager'); // get the pager of datagrid
		pager.pagination( {
			buttons : [ {
				iconCls : 'icon-search',
				handler : function() {
					alert('search');
				}
			}, {
				iconCls : 'icon-add',
				handler : function() {
					alert('add');
				}
			}, {
				iconCls : 'icon-edit',
				handler : function() {
					alert('edit');
				}
			} ]
		});
	})
</script>
	</head>
	<body>
		<div class="place">
			<span>位置：</span>
			<ul class="placeul">
				<li>
					<a href="user.jsp">用户管理</a>
				</li>
			</ul>
		</div>

		<div style="margin: 20px 0;"></div>
		<table id="dg" title="用户管理" toolbar="#toolbar"
			;
			style="height: 450px"
			data-options="rownumbers:true,singleSelect:true,pagination:true,url:'<%=basePath%>/user/list.do',method:'post'">
			<thead>
				<tr>
					<th data-options="field:'account',width:100">
						账户
					</th>
					<th data-options="field:'name',width:80">
						姓名
					</th>

					<th data-options="field:'image',width:80">
						生日
					</th>
					<th data-options="field:'password',width:100">
						性别
					</th>
					<th data-options="field:'attr1',width:100">
						电话
					</th>
					<th data-options="field:'itemid',width:80">
						邮箱
					</th>
					<%--<th data-options="field:'productid',width:100">
						地址
					</th>
					<th data-options="field:'itemid',width:80">
						职务
					</th>
					<th data-options="field:'productid',width:100">
						部门
					</th>
				--%>
				</tr>
			</thead>
		</table>

		<div id="toolbar">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-add" plain="true"
				onclick="javascript: $('#dg').datagrid('addRow');">添加用户</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true"
				onclick="javascript: $('#dg').datagrid('destroyRow');">删除用户</a>
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-save" plain="true"
				onclick="javascript: $('#dg').datagrid('saveRow');">修改用户</a> 查询：
			<input type="text" class="textbox" name="user"
				style="width: 110px height :   50px;">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				iconCls="icon-search" plain="true"
				onclick="javascript: $('#dg').datagrid('load');">查询</a>
		</div>

	</body>
</html>